<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: liuwen
 * @Date: 2023-08-03 15:07:28
 * @LastEditors: liuwen
 * @LastEditTime: 2023-09-04 09:01:56
-->
<template>
  <div class="app-container">
    <div class="main-box">
      <div class="logo-box">
        <img src="../assets/logo/logo.png">
        <span>文件快传</span>
      </div>
      <div class="btn-box">
        <!-- :on-remove="handleRemove" -->
        <el-upload
            class="main-btn"
            action
            :show-file-list="false"
            :file-list="fileList"
            :http-request="httpRequest"
          >
            <el-button size="small" type="primary" id="fileUploadBtn">发送文件</el-button>
        </el-upload>
        <el-button class="main-btn item1" @click="handleReceive()">接收文件</el-button>
        <div class="top-warning-container" @click="handleWarning()">
          <i class="el-icon-warning"></i>
          <span id="illegal-files-not-allowed">上传违法违规内容将承担法律责任</span>
        </div>
      </div>
      
    </div>
    <el-dialog
      title="警告"
      :visible.sync="dialogVisible"
      center
      :modal="false"
      width="520px"
      >
      <div class="dialog-content">
        严禁上传违法违规内容，包括但不限于：<strong>色情低俗、政治敏感、<span class="emphasize">VPN</span>、暴力、恶意软件、诈骗、贩卖公民隐私</strong>等。上传上述内容将被<strong>永久封禁账号或 IP 地址</strong>，并可能<strong>承担刑事责任</strong>。<br><br>举报 / 公安调证联系邮箱：<a class="link" href="mailto:test@163.com">test@163.com</a>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="警告"
      :visible.sync="uploadWarning"
      center
      :modal="false"
      width="520px"
      >
      <div class="content-left-aligned">严禁上传违法违规内容，包括但不限于：<strong>色情低俗、政治敏感、<span class="emphasize">VPN</span>、暴力、恶意软件、诈骗、贩卖公民隐私</strong>等。上传上述内容将被<strong>永久封禁账号或 IP 地址</strong>，并可能<strong>承担刑事责任</strong>。
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose(true)">同意并继续</el-button>
        <el-button @click="handleClose(false)">放弃上传</el-button>
      </span>
    </el-dialog>
    <!-- 生成取件码 -->
    <el-dialog
      title="文件传输"
      :visible.sync="uploadVisible"
      center
      :modal="false"
      width="520px"
      >
      <div class="dialog-con-box">
        <el-form :model="uploadForm" ref="form" label-width="80" :rules="rules">
          <el-form-item label="文件列表:">
            <el-upload
              class="main-btn"
              v-model="uploadForm.paths"
              action
              :show-file-list="true"
              :file-list="fileList"
              :http-request="httpRequest"
            >
              <el-button type="text">上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="有效期限:" prop="exp">
            <el-select v-model="uploadForm.exp" placeholder="请选择有效期限">
              <el-option v-for="(item,i) in dictList" :label="item.dictLabel" :value="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="补充描述:" prop="remark">
            <el-input type="textarea" :rows="3" placeholder="输入你的信息，它将显示给收到的用户。" v-model="uploadForm.remark">
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="radio" class="radio-box">
            <el-radio v-model="uploadForm.radio" :label="true" @click.native.prevent="changeRadio()">
              我已阅读且同意用户协议和隐私政策并对我分享的文件的合法合规性负责
            </el-radio>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit()" class="ju-btn">开始上传</el-button>
      </span>
    </el-dialog>
    <!-- 取件码弹出 -->
    <el-dialog
      title=""
      :visible.sync="successCodeStatus"
      center
      :custom-class="'successCode-dialog'"
      :modal="false"
      width="520px"
      >
      <div class="success-content-box" v-if="codeType == 1">
        <span class="mes1">文件已经发送成功</span>
        <span class="mes2">您的文件取件码为</span>
        <div class="nums">
          <span v-for="item in codeResult.split('')">{{item}}</span>
        </div>
        <span class="mes2">接收文件时，请输入该6位取件码</span>
        <span class="mes2">您也可以 <span @click="downFile()">复制下载链接</span>发送给文件接收人</span>
      </div>
      <div class="success-content-box" v-else>
        <span class="mes1">请输入取件码 </span>
        <span class="mes2">请输入发件人给您分享的取件码</span>
        <div class="nums">
          <el-input v-model="receiveCode" placeholder="" :maxlength="6"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="successCodeStatus=false" class="ju-btn" v-if="codeType == 1">完成</el-button>
        <el-button type="primary" @click="getFileByCode()" class="ju-btn" v-else>确定</el-button>
      </span>
    </el-dialog>
    <!-- 接收文件列表 -->
    <ReceiveList
      :isShow="showReceiveList"
      :code="receiveCode.trim()"
      :type="1"
      @receiveClose="receiveClose"
    />
    
  </div>
</template>

<script>
import { uploadFile,genCode,getListByCode,getDict } from "@/api/file";
import { mapGetters } from 'vuex'


import ReceiveList from "@/components/ReceiveList"

export default {
  name: "Index",
  components: {
    ReceiveList
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'token'
    ]),
  },
  data() {
    return {
      dialogVisible: false,
      fileList:[],
      rules:{
        exp:[{ required: true, message: '请选择有效期限', trigger: 'blur'}],
        radio: [{ required: true, message: '请勾选用户协议和隐私政策', trigger: 'change',validator: this.handleValidate }],
      },
      uploadWarning:false,//上传前的提示
      uploadVisible:false,//上传弹框
      uploadForm:{
        radio:0
      },
      timeList:['1天','7天','30天','永久有效'],//有效期限--字典获取
      
      successCodeStatus:false,//取件码弹出
      codeType:2,//code弹窗类型  1：获取取件码   2：输入取件码
      codeResult:'',//获取取件码
      receiveCode:'',//输入取件码
      showReceiveList:false,//接收到的文件弹框
      fileListOption: {//图层列表
        tip: false,
        searchShow: false,
        border: false,
        index: false,
        searchShowBtn:false,//搜索按钮
        columnBtn: false,//列按钮
        refreshBtn:false,
        selection: true,
        viewBtn: false,
        editBtn:false,
        addBtn:false,
        delBtn:false,
        menuWidth: 80,
        emptyBtnText:'重置',
        emptyBtnIcon:'el-icon-refresh',
        dialogClickModal: false,
        menu:true,
        showHeader:false,
        column: [
          {
            label: "",
            prop: "oss",
            width:200,
            formatter:(val,value,label)=>{
              return val.oss.originalName
            }
          },
        ]
      },
      selectList:[],//当前选中的文件
      dictList:[],//有效期限字典值
      
    };
  },
  mounted(){
    //有参数，直接查询
    let copyCode = this.$route.query.copyCode;
    if(copyCode && copyCode != ''){
      this.receiveCode = copyCode;
      this.showReceiveList = true;
    }
    window.fileUploadFunc = ()=>{
      document.getElementById('fileUploadBtn').click();
    }
    this.$store.dispatch("SetLoginStatus", false)
    this.getDictList();
  },
  methods: {
    //有效期限字典值
    getDictList(){
      getDict().then(res => {
        if(res.code == 200){
          this.dictList= res.data;
        }
      })
    },
    changeRadio(){
      this.uploadForm.radio = !this.uploadForm.radio;
    },
    handleRemove(file) {
      const index = this.fileList.findIndex(child => child.name === file.name);
      this.fileList.splice(index,1)
    },
    //上传前的警告说明
    handleClose(result){
      this.uploadWarning = false;
      if(result){
        //显示上传文件后弹窗
        this.uploadVisible = true;
      }else{
        this.fileList = [];
      }
    },
    async httpRequest({ file }) {
      let formData = new FormData();
      formData.append("file", file);
      let {code,  data } = await uploadFile(formData);
      if (code == 200) {
        this.fileList.push({
          name:data.fileName,
          ...data
        });
        if(!this.uploadVisible){
          this.uploadWarning = true;
        }
      }
    },
    //免责声明弹窗
    handleWarning(){
      this.dialogVisible = true;
    },
    //同意协议校验
    handleValidate(rule, value, callback){
      if (!value) {
        callback(new Error('请勾选用户协议和隐私政策'));
      } else{
        callback();
      }
    },
    //表单弹窗提交
    handleSubmit(){
      this.$refs.form.validate(valid => {
        if (valid) {
          let query = {
            userId:this.userInfo.uid,
            paths:this.fileList.map(item=>{
              return item.ossId
            }).toString(),
            exp:this.uploadForm.exp,
            remark:this.uploadForm.remark
          }
          genCode(query).then(res => {
            if(res.code == 200){
              this.uploadForm = {radio:0};
              //获取取件码，弹框提示
              this.codeResult = res.data+'' || ''
              this.uploadVisible = false;
              this.codeType = 1;
              this.fileList = [];
              this.successCodeStatus = true;
            }
          })
        }
      });
    },
    //复制下载链接  拼接地址+code
    downFile(){
      let url = window.location.href.split('?')[0] + `?copyCode=${this.codeResult}`;
      this.$copyText(url).then(e=>{
          this.$message.success('复制成功');
        },e=>{
          console.log('复制失败：', e);
        }
      )
    },
    //根据获取文件列表 TODO
    async getFileByCode(){
      this.successCodeStatus = false;
      this.showReceiveList = true;
    },
    //接收文件
    handleReceive(){
      this.codeType = 2;
      this.successCodeStatus = true;
      this.receiveCode = '';
    },
    receiveClose(){
      this.$nextTick(() => {
        this.showReceiveList = false;
      })
    },
  }
};
</script>

<style scoped lang="scss">
  .main-box{
    width: 350px;
    margin:0 auto;
    height: 80%;
    max-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 0;
    .logo-box{
      width: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 100px;
      margin-bottom: 100px;
      flex-direction: column;
      span{
        font-size: 34px;
      }
      img{
        width: 150px;
        height: 150px;
      }
    }
    .btn-box{
      .main-btn{
        width: 224px;
        border-radius: 10px;
        display: block;
        font-size: 14px;
        height: 49px;
        margin-bottom: 20px;
        background-color:#4191f5;
        border: none;
        box-shadow: 0 5px 20px rgba(65,145,245,.3);
        color: #fff;
        transition: background-color .25s,box-shadow .25s,color .25s,opacity .25s;
        margin: 0 auto;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        ::v-deep .el-upload{
          width: 100%;
          height: 100%;
          line-height: 49px;
        }
        ::v-deep .el-button{
          font-size: 14px;
          background: none;
          border:none;
        }
      }
      .item1{
        background-color: #fff;
        border: none;
        box-shadow: 0 5px 20px rgba(65,145,245,.2);
        color: #4191f5;
        margin-top: 20px;
      }
    }
    .top-warning-container{
      background-color: #eb003c;
      border-radius: 5px;
      color: #fff;
      cursor: pointer;
      font-size: 14px;
      left: 50%;
      padding: 5px 10px;
      position: fixed;
      text-align: center;
      transform: translateX(-50%);
      transition: all .25s;
      white-space: nowrap;
      z-index: 1;
      bottom: 30px;
      i{
        margin-right: 5px;
      }
    }
  }
  .warning-dialog-box{
    ::v-deep .el-dialog__header{
      text-align: left;
      .el-dialog__headerbtn{
        display: none;
      }
    }
  }
  .content-left-aligned{
    strong{
      color:#eb003c;
    }
  }
  .dialog-con-box{
    ::v-deep .el-select{
      width: 100%;
    }
    ::v-deep .is-error{
      .el-radio__inner{
        border-color: #ff4949;
      }
      .el-radio{
        color:#ff4949;
      }
    }
    .radio-box{
      ::v-deep .el-form-item__error{
        display:none;
      }
    }
  }
  ::v-deep .successCode-dialog .el-dialog__header{
      margin-bottom: -10px;
  }
  .successCode-dialog{
    
    .success-content-box{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .mes1{
        display: block;
        font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 22px;
        color: #333;
        text-align: center;
        line-height: 40px;
      }
      .mes2{
        display: block;
        text-align: center;
        line-height: 30px;
        span{
          color: #4191F5;
          cursor: pointer;
        }
      }
      .nums{
        display: flex;
        justify-self: center;
        align-items: center;
        margin: 20px 0;
        span{
          font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
          font-weight: 700;
          font-style: normal;
          font-size: 36px;
          color: #00B2FF;
          display: block;
          margin:0 5px;
        }
        ::v-deep .el-input__inner{
          border: none;
          border-bottom: 1px solid #00B2FF;
          border-radius: 0;
          letter-spacing: 5px;
          font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
          font-weight: 700;
          font-style: normal;
          font-size: 36px;
          color: #00B2FF;
          display: block;
          margin: 0 5px;
          width: 185px;
        }
      }
      .receiveWarning{
        color: #D9001B;
        background-color: rgb(254, 242, 245);
        border: none;
        border-radius: 5px;
        padding: 10px;
        font-size: 13px;
        width: 80%;
        line-height: 27px;
        margin: 10px 0 0 0;
        span{
          color: #2620DD;
          cursor: pointer;
        }
      }
      .receiteList-box{
        margin-top:20px;
        ::v-deep .avue-crud__body{
          border:none
        }
      }
    }

  }
  
  .ju-btn{
    background-color: #F9723D;
    border-color: #F9723D;
  }
</style>

